<template>
    <div class="detail-main">
        <el-tabs type="border-card" v-model="activeName">
            <el-tab-pane label="标准信息" name="tab1">
                <StanInfor :formInline="standardInfo" v-if="systemId"></StanInfor>
            </el-tab-pane>
            <el-tab-pane label="主参编单位" name="tab2">
                <div>
                    <div class="title-b">主编单位</div>
                    <SingleTable :systemId="systemId" :current-tab="activeName" tab="tab2"  :columnPropOne="'editorUnitName'" :columnLabelOne="'单位名称'" :isOneOrTwo="true"></SingleTable>
                </div>
                <div>
                    <div class="title-b">参编单位</div>
                    <SingleTable2 :systemId="systemId" :current-tab="activeName" tab="tab2" :columnPropOne="'editorUnitName'" :columnLabelOne="'单位名称'" :isOneOrTwo="true"></SingleTable2>
                </div>
            </el-tab-pane>
            <el-tab-pane label="主要起草人" name="tab3">
                <div class="title-b">主要起草人</div>
                <SingleTable :systemId="systemId" :current-tab="activeName" tab="tab3" :columnPropOne="'mainDrafterName'" :columnLabelOne="'姓名'" :isOneOrTwo="true"></SingleTable>
            </el-tab-pane>
            <el-tab-pane label="主要审查人" name="tab4">
                <div class="title-b">主要审查人</div>
                <SingleTable :systemId="systemId" :current-tab="activeName" tab="tab4" :columnPropOne="'expertName'" :columnLabelOne="'姓名'" :isOneOrTwo="true"></SingleTable>
            </el-tab-pane>
            <!-- <el-tab-pane label="术语" name="tab5">
                <div class="title-b">术语</div>
                <Term :systemId="systemId" :isCheck="true"></Term>
            </el-tab-pane> -->
            <el-tab-pane label="条文" name="tab5">
                <div class="title-b">条文</div>
                <Term :systemId="systemId" :current-tab="activeName" tab="tab5" :isCheck="false"></Term>
            </el-tab-pane>
            <el-tab-pane label="引用标准" name="tab6">
                <div class="title-b">引用标准</div>
                <SingleTable
                    :systemId="systemId"
                    :current-tab="activeName"
                     tab="tab6"
                    :columnPropOne="'standardNumber'"
                    :columnLabelOne="'标准编号'"
                    :columnPropTwo="'standardName'"
                    :columnLabelTwo="'标准名称'"
                    :isOneOrTwo="false"></SingleTable>
            </el-tab-pane>
            <el-tab-pane label="应用项目" name="tab7">
                <div class="title-b">应用项目</div>
                <SingleTable
                    :systemId="systemId"
                    :current-tab="activeName"
                     tab="tab7"
                    :columnPropOne="'projectName'"
                    :columnLabelOne="'项目名称'"
                    :columnPropTwo="'regionName'"
                    :columnLabelTwo="'区域名称'"
                    :isOneOrTwo="false"></SingleTable>
            </el-tab-pane>
        </el-tabs>
        <div class="btn">
            <el-button @click="onClose">关闭</el-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import axios from "axios";
import { onMounted, ref } from 'vue';
import {
  Label
} from './selectors';
import SingleTable from './singleTable.vue';
import SingleTable2 from './singleTable2.vue';
import StanInfor from './stanInfor.vue';
import Term from './term.vue';

import { useRoute } from 'vue-router';
  import { getServerUrl } from '@/utils/url';
  const serverUrl = getServerUrl();
const router = useRoute();
const sysId = router.params.id
const activeName = ref('tab1')
const standardInfo = ref({
	standardName: '',
	standardEnName: '',
	standardNumber: '',
	recordNumber: '',
	substitutedName: '',
	substitutedNo: '',
	seqNo: '',
	version: 1,
	initiateTime: '',
	publishTime: '',
	implementTime: '',
	abolishTime: '',
	approvalTime: '',
	remark: '',
	mandatoryCategoryVal: '', // 强制性分类
	standardCategoryVal: '', //标准类别
	standardStatusVal: '', //标准状态
	compileStatusVal: '', //编制状态
	basicCategoriesVal: '', //基础类别
	specialCategoriesVal: [], //专题分类
	engineeringMajorVal: [], //工程专业分类
	lifecycleCategoryVal: [], //工程全生命周期分类
	managementLineVal: [], //管理条线分类
	buildingTypeVal: [], //建筑类型分类
	yangtzeRiverTagVal: [], //长三角区域标准分类
	internationalFieldVal: [], //标准国际化领域标签
	hotFieldVal: [], //热门领域标签
	fileRecordId: '',
	file: {
		fileName: ''
	},
  labels: [],
  basicCategoriesArray: [],
  specialCategoriesArray: []
})
const systemId = ref('')
const basicCategoriesArray = ref([])
const specialCategoriesArray = ref([])

const onClose = () => {
    console.log('关闭前往详情上一页')
   // router.push({ name: 'standardSystem'});
		window.history.back()
}

const getDetail = () => {
    axios.get(
      serverUrl + "standardSystem/getDetailInfo?systemId=" + sysId,
    ).then(res => {
      standardInfo.value.labels = res.data.data.labels
      standardInfo.value.standardName = res.data.data.standardName
			standardInfo.value.standardEnName = res.data.data.standardEnName
			standardInfo.value.standardNumber = res.data.data.standardNumber
			standardInfo.value.recordNumber = res.data.data.recordNumber
			standardInfo.value.substitutedName = res.data.data.substitutedName
			standardInfo.value.substitutedNo = res.data.data.substitutedNo
			standardInfo.value.seqNo = res.data.data.seqNo
			standardInfo.value.version = res.data.data.version
			standardInfo.value.initiateTime = res.data.data.initiateTime
			standardInfo.value.publishTime = res.data.data.publishTime
			standardInfo.value.implementTime = res.data.data.implementTime
			standardInfo.value.abolishTime = res.data.data.abolishTime
			standardInfo.value.approvalTime = res.data.data.approvalTime
			standardInfo.value.remark = res.data.data.remark
			systemId.value = res.data.data.id
			const labels = res.data.data.labels
			const {
				mandatoryCategoryVal,
				standardCategoryVal,
				standardStatusVal,
				compileStatusVal,
				engineeringMajorVal,
				lifecycleCategoryVal,
				managementLineVal,
				buildingTypeVal,
				yangtzeRiverTagVal,
				internationalFieldVal,
				hotFieldVal
			} = {
				mandatoryCategoryVal: extractCategoryValue(labels, '4'),
				standardCategoryVal: extractCategoryValue(labels, '1'),
				standardStatusVal: extractCategoryValue(labels, '2'),
				compileStatusVal: extractCategoryValue(labels, '3'),
				engineeringMajorVal: extractCategoryValue(labels, '7', true),
				lifecycleCategoryVal: extractCategoryValue(labels, '5', true),
				managementLineVal: extractCategoryValue(labels, '8', true),
				buildingTypeVal: extractCategoryValue(labels, '6', true),
				yangtzeRiverTagVal: extractCategoryValue(labels, '14', true),
				internationalFieldVal: extractCategoryValue(labels, '12', true),
				hotFieldVal: extractCategoryValue(labels, '13', true)
			}

			// 统一赋值
			Object.assign(standardInfo.value, {
				mandatoryCategoryVal,
				standardCategoryVal,
				standardStatusVal,
				compileStatusVal,
				engineeringMajorVal,
				lifecycleCategoryVal,
				managementLineVal,
				buildingTypeVal,
				yangtzeRiverTagVal,
				internationalFieldVal,
				hotFieldVal
			})
			basicCategoriesArray.value = res.data.data.basicCategories
			specialCategoriesArray.value = res.data.data.specialCategories
			collectSelectedId(basicCategoriesArray.value)
			collectSelectedIds(specialCategoriesArray.value)
			if (res.data.data.fileRecordId) {
				standardInfo.value.fileRecordId = res.data.data.fileRecordId
				standardInfo.value.file = res.data.data.file
			} else {
				standardInfo.value.fileRecordId = ''

				standardInfo.value.file = {
					fileName: ''
				}
			}
      standardInfo.value.basicCategoriesArray = basicCategoriesArray.value
      standardInfo.value.specialCategoriesArray = specialCategoriesArray.value
    })
    
}

const extractCategoryValue = (labels: Label[], type: string, isArray: boolean = false) => {
	const category = labels.find(item => item.type === type)
	if (!category) {
		return isArray ? [] : undefined
	}
	return isArray ? category.options.map(item => item.id) : category.options.map(item => item.id)[0]
}

const collectSelectedId = (nodes: any[]) => {
	nodes.forEach(node => {
		if (node.hasChosen) {
			standardInfo.value.basicCategoriesVal = node.id
		}
		if (node.children.length > 0) {
			collectSelectedId(node.children)
		}
	})
}

// 递归查找选中节点id
const collectSelectedIds = (nodes: any[]) => {
	nodes.forEach(node => {
		if (node.hasChosen) {
			standardInfo.value.specialCategoriesVal.push(node.id)
		}
		if (node.children.length > 0) {
			collectSelectedIds(node.children)
		}
	})
}

onMounted(() => {
  getDetail()
})
</script>
<style scoped>
.detail-main {
	margin: 0px 1.43rem;
}

.detail-main .el-tabs--border-card {
	border-bottom: none;
}

.title-b {
	font-weight: 700;
	margin: 1rem 0;
}

.btn {
	border: 1px solid #dcdfe6;
	border-top: none;
	display: flex;
	flex-direction: column;
	justify-items: flex-end;
	align-items: flex-end;
	padding: 15px;
	padding-top: 0px;
	margin-bottom: 20px;
}
</style>
